<template>
    <div ref="editorRef" style="height: 300px;"></div>
  </template>
  
  <script>
  import ace from 'ace-builds'
  import "ace-builds/src-noconflict/mode-yaml";
  import "ace-builds/src-noconflict/mode-python";
  import "ace-builds/src-noconflict/mode-sh";
  import "ace-builds/src-noconflict/theme-dracula";
  import "ace-builds/src-noconflict/ext-language_tools";
  import "ace-builds/src-noconflict/ext-emmet";
  import "ace-builds/src-noconflict/snippets/yaml";
  import "ace-builds/src-noconflict/snippets/python";
  import "ace-builds/src-noconflict/snippets/sh";
  export default {
    props: {
      value: String,
      language: {
        type: String,
        default: 'python'
      }
    },
    mounted() {
      this.editor = ace.edit(this.$refs.editorRef)
      this.editor.session.setMode(`ace/mode/${this.language}`)
      this.editor.setValue(this.value)
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getValue())
      })
    },
    watch: {
      value(newValue) {
        if (this.editor) {
          this.editor.setValue(newValue)
        }
      },
      language(newLanguage) {
        if (this.editor) {
          this.editor.session.setMode(`ace/mode/${newLanguage}`)
        }
      }
    },
    beforeUnmount() {
      if (this.editor) {
        this.editor.destroy()
      }
    }
  }
  </script>
  